<template>
  <div class="box">
    <hearder :navNumber="0"></hearder>

    <!-- 横幅轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in imgSrc" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- 口碑 -->
    <div class="section1">
      <div class="xt-h3 xt-font-weight-bolder">
        28年聚焦摄影 超160万新人口碑见证
      </div>
      <div class="xt-h5 xt-my-2 ">
        每10对新人就有4对选择了我们
      </div>
      <!-- 内容 -->
      <div class="section1-content xt-row xt-justify-between">
        <div class="section1-content-cont1">
          <img :src="imgSrc2.img5" />
        </div>
        <div class="section1-content-cont2">
          <div class="section1-content-cont2-cont2s">
            <img :src="imgSrc2.img6" />
          </div>
          
          <div class="section1-content-cont2-cont2s">
            <img :src="imgSrc2.img7" />
          </div>
        </div>
        <div class="section1-content-cont2">
          <div class="section1-content-cont2-cont2s">
            <img :src="imgSrc2.img8" />
          </div>
          
          <div class="section1-content-cont2-cont2s">
            <img :src="imgSrc2.img9" />
          </div>
        </div>
      </div>
    </div>

    <!-- 八大主题 -->
    <div class="section2 xt-text-center xt-mt-2">
      <div class="xt-h3 xt-font-weight-bolder">
        八大主题
      </div>
      <div class="xt-h5 xt-my-2 ">
        领先行业的原创灵感 千万级研发投入
      </div>

      <div class="swiper-container section2-con">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in imgSrc3" :key="index">
            <img :src="item" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <!-- 婚纱客照 感动人心 -->
    <div class="section3 xt-text-center">
      <div class="xt-h3 xt-font-weight-bolder">
        婚纱客照 感动人心
      </div>
      <div class="xt-h5 xt-my-2 ">
        让人们因影像而美好
      </div>

      <div class="swiper-container section3-con">
        <div class="swiper-wrapper">
          <div class="swiper-slide section3-con  section3-cos">
            <div class="section3-con-cont">
              <img :src="imgSrc2.img18" />
            </div>
            <div class="section3-con-cont">
              <img :src="imgSrc2.img19" />
            </div>
            <div class="section3-con-cont">
              <img :src="imgSrc2.img20" />
            </div>
          </div>

          <div class="swiper-slide section3-con  section3-cos">
            <div class="section3-con-cont">
              <img :src="imgSrc2.img21" />
            </div>
            <div class="section3-con-cont">
              <img :src="imgSrc2.img22" />
            </div>
            <div class="section3-con-cont">
              <img :src="imgSrc2.img23" />
            </div>
          </div>

          <div class="swiper-slide section3-con  section3-cos">
            <div class="section3-con-cont">
              <img :src="imgSrc2.img24" />
            </div>
            <div class="section3-con-cont">
              <img :src="imgSrc2.img25" />
            </div>
            <div class="section3-con-cont">
              <img :src="imgSrc2.img26" />
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <!-- 2021摄影8S无忧服务 -->
    <div class="section4 xt-mt-5 xt-mb-5">
      <div class="xt-mt-3 xt-text-center xt-h3 xt-font-weight-bolder">2021我们摄影8S无忧服务</div>
      <div class="xt-mt-1 xt-text-center xt-h6">2021 Carefree service</div>

      <div class="section4-con xt-flex xt-justify-between">
        <div class="section4-con-cont xt-text-center xt-mt-4" v-for="(item, index) in imgSrc4" :key="index">
          <img :src="item.img" class="section4-con-cont-img" alt="">
          <div class="section4-con-cont-title xt-font-sm xt-mt-2">{{ item.title }}</div>
          <div class="section4-con-cont-text xt-mt-1">{{ item.text }}</div>
        </div>
      </div>

      <div class="section4-con xt-flex xt-justify-between">
        <div class="section4-con-cont xt-text-center xt-mt-4" v-for="(item, index) in imgSrc5" :key="index">
          <img :src="item.img" class="section4-con-cont-img" alt="">
          <div class="section4-con-cont-title xt-font-sm xt-mt-2">{{ item.title }}</div>
          <div class="section4-con-cont-text xt-mt-1">{{ item.text }}</div>
        </div>
      </div>
    </div>

    <leave></leave>
  </div>
</template>

<script>
import hearder from '../components/hearder.vue'
import leave from '../components/leave.vue'
import Swiper from 'swiper'

export default {
  name: 'Home',
  components: {
    hearder,
    leave
  }, 
  data(){
    return{
      imgSrc:[
        require('../assets/img/1-2101091U053123.jpg'),
        require('../assets/img/1-210315161J2606.jpg'),
        require('../assets/img/1-210110112130352.jpg')
      ],
      imgSrc2:{
        img5: require('../assets/img/5.png'),
        img6: require('../assets/img/6.png'),
        img7: require('../assets/img/7.png'),
        img8: require('../assets/img/8.png'),
        img9: require('../assets/img/9.png'),

        img18: require('../assets/img/18.jpg'),
        img19: require('../assets/img/19.jpg'),
        img20: require('../assets/img/20.jpg'),
        img21: require('../assets/img/21.jpg'),
        img22: require('../assets/img/22.jpg'),
        img23: require('../assets/img/23.jpg'),
        img24: require('../assets/img/24.jpg'),
        img25: require('../assets/img/25.jpg'),
        img26: require('../assets/img/26.jpg'),
      },
      imgSrc3:[
        require('../assets/img/10.jpg'),
        require('../assets/img/11.jpg'),
        require('../assets/img/12.jpg'),
        require('../assets/img/13.jpg'),
        require('../assets/img/14.jpg'),
        require('../assets/img/15.jpg'),
        require('../assets/img/16.jpg'),
        require('../assets/img/17.jpg'),
      ],

      imgSrc4:[
       { img:require('../assets/img/27.png'), title:'拍摄过程一价全包', text:'过程绝无隐形消费' },
       { img:require('../assets/img/28.png'), title:'自选摄影师', text:'摄影师我只相信自己选的' },
       { img:require('../assets/img/29.png'), title:'1对1策划拍摄', text:'尊享明星定制体验' },
       { img:require('../assets/img/30.png'), title:'边玩边拍', text:'随心随性玩拍新体验' },
      ],

      imgSrc5:[
       { img:require('../assets/img/31.png'), title:'拍摄不满意重拍', text:'更放心的服务保障' },
       { img:require('../assets/img/32.png'), title:'1对1设计沟通', text:'确认满意之后再出片' },
       { img:require('../assets/img/33.png'), title:'尊享全国顺丰包邮', text:'省时省心更省力' },
       { img:require('../assets/img/34.png'), title:'延期赔付', text:'延期取件先行赔付 尊重承诺' },
      ]
    }
  },

  mounted() {
    new Swiper ('.swiper-container', {
      loop: true,
      // 如果需要分页器
      pagination: '.swiper-pagination',
      // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      autoplay:2000,
      autoplayDisableOnInteraction :false, // 如果设置为false，用户操作swiper之后自动切换不会停止
    })
  },
}

</script>
<style lang="less" scoped>
.swiper-container{
  height: 600px;
  width: 100%;
  .swiper-wrapper{
    .swiper-slide{
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 500px;
    }
  }
}
.swiper-button-prev{
		// background: #FFFFFF !important;
    color: #FFFFFF;
}
.section1{
  margin-top: 50px;
  text-align: center;

  &-content{
    width: 1280px;
    margin: 0 auto;

    &-cont1{
      height: 574px;
      width: 340px;
      overflow: hidden;
    }
    &-cont2{
      height: 574px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      &-cont2s{
        overflow: hidden;
        height: 282px;
        width: 454px;
      }
    }
    img{
      width: 100%;
      height: 100%;
      transition: all 10s;
    }
    img:hover{
      transform: scale(2);
      cursor: pointer;
    }
  }
}
.section2{
  &-con{
    height: 700px;
  }
}
.section3{
  background-color: #f0f0f0;
  width: 100%;
  padding: 20px 0;

  &-con{
    width: 1300px;
    height: 720px;

    &-cont{
      height: 720px;
      width: 416px;
      overflow: hidden;
      border-radius: 20px;
    
      img{
        width: 100%;
        height: 100%;
        transition: all 10s;
      }
      img:hover{
        transform: scale(2);
        cursor: pointer;
      }
    }
  }
  &-cos{
    display: flex;
    justify-content: space-between;

  }
}
.section4{
  &-con{
    width: 1000px;
    margin: 0 auto;

    &-cont{
      width: 200px;

      &-img{
        width: 100px;
        height: 130px;
      }
      &-title{
        color: #be905e;
      }
    }
  }
}
</style>